<template>
  <v-fade-transition mode="out-in">
    <v-icon
      :key="isDark"
      class="mr-4"
      @click="isDark = !isDark"
    >
      {{ isDark ? icons.mdiWeatherSunny : icons.mdiWeatherNight }}
    </v-icon>
  </v-fade-transition>
</template>

<script>
import useAppConfig from '@core/@app-config/useAppConfig'
import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js'

export default {
  setup () {
    const { isDark } = useAppConfig()

    return {
      isDark,

      // Icons
      icons: {
        mdiWeatherNight,
        mdiWeatherSunny,
      },
    }
  },
}
</script>

<style>
</style>
